<template>
  <h2>测试 Grid</h2>
  <Grid :column="3" gap="12px">
    <GridItem class="item">1</GridItem>
    <GridItem class="item">2</GridItem>
    <GridItem class="item">3</GridItem>
    <GridItem class="item" :colSpan="2">4</GridItem>
    <GridItem class="item" :rowSpan="2">5</GridItem>
    <GridItem class="item">6</GridItem>
    <GridItem class="item">7</GridItem>
    <GridItem class="item" :colSpan="3">8</GridItem>
  </Grid>

  <h2>测试 Card</h2>
  <Card statusType="bar">
    <template #title>HTML 属性参考</template>
    <template #extra>更多内容</template>
    HTML 中的元素拥有属性（attribute）；这些额外的值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。
  </Card>

  <h2>测试 DataItem</h2>
  <DataItem label="作者" value="1222" />

  <h2>测试 Feature</h2>
  <Feature mode="tag" label="示例标签" :color="{ default: '#333', active: '#f00' }" status="active">
    <template #label>Feature</template>
  </Feature>

  <h2>测试 Detail</h2>
  <!-- <Detail
    :columns="[
      { title: '姓名', dataIndex: 'name' },
      { title: '年龄', dataIndex: 'age' },
    ]"
    :data="{
      name: '张三',
      age: 28,
    }"
    border
    gap="20px"
    class="custom-detail"
  /> -->

  <h2>测试 Image</h2>
  <Image src="/logo.png" />
  <Image src="/logo.png">查看图片</Image>
  <Image src="/logo.png">
    <el-button type="primary">查看图片</el-button>
  </Image>
</template>

<script setup>
import { Grid, GridItem, Card, DataItem, Feature, Detail, Image } from '@wowon/components';
</script>

<style lang="less">
.item {
  background-color: var(--color-bg-component);
  padding: 12px;
  border-radius: 4px;
}
</style>
